import React, {useEffect, useRef, useState,} from "react";
import type {
  ActionType,
  ProColumns
} from "@ant-design/pro-components";
import {
  ProTable,
  ProFormText, ModalForm,
} from "@ant-design/pro-components";
import {Button, Popconfirm,} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import message from "antd/es/message";
import {addGoods, deleteGoods, listGoodsByPage, updateGoods} from "@/services/goods/api";


const GoodsControl: React.FC = () => {

  const actionRef = useRef<ActionType>();
  const [currentPage,setCurrentPage] = useState<number>(1);
  const [isCreate, setIsCreate] = useState<boolean>(false);
  const [current, setCurrent] = useState<API.GoodsVO>();
  const [isUpdate, setIsUpdate] = useState<boolean>(false);
  const [data, setData] = useState<API.GoodsVO[]>([]);
  const [total, setTotal] = useState<number>(0);
  const loadData = async (params: any) => {
    const res = await listGoodsByPage({
      params : params,
      pageNum: currentPage,
      pageSize: 10,
    });
    if (res.code != 0) {
      message.error("货品数据加载失败 " + res.message);
      return;
    }
    setData(res?.data?.records || []);
    setTotal(res?.data?.total || 0);
  }
  const handleDelete=async (id: string)=>{
    const res = await deleteGoods(id);
    if(res.code != 0){
      message.error("删除货品失败 "+res.message);
      return
    }
    message.success("删除货品成功");
  }
  const columns: ProColumns<API.GoodsVO>[] = [
    {
      title: '货品编码',
      width: 120,
      dataIndex: 'goodsCode',
    },
    {
      title: '货品名称',
      width: 120,
      dataIndex: 'goodsName',
    },
    {
      title: '计数单位',
      width: 120,
      search: false,
      dataIndex: 'tally',
    },
    {
      title: '固定金额',
      width: 120,
      search: false,
      dataIndex: 'amountGd',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 120,
      key: 'option',
      render: (text, record, _, action) => [
        <Button key="edit" onClick={
        ()=>{
    setIsUpdate(true);
    setCurrent(record);
  }
} type={'primary'}>
    编辑
    </Button>,

    <Popconfirm
  title="你确定要删除货品吗"
  key="delete"
  onConfirm={()=>{
    handleDelete(record?.id||'');
  }}
  onCancel={()=>{}}
  okText="Yes"
  cancelText="No"
    >
    <Button danger>删除</Button>
    </Popconfirm>
],
},
];

  useEffect(() => {
    loadData({});
  }, [currentPage])
  return (
    <>
      <ProTable<API.GoodsVO>
        columns={columns}
  request={async (params)=>{
    await loadData(params);

    return data;
  }}
  actionRef={actionRef}
  dataSource={data}
  cardBordered
  editable={{
    type: 'multiple',
  }}
  columnsState={{
    persistenceKey: 'pro-table-singe-demos',
      persistenceType: 'localStorage',
      defaultValue: {
      option: {fixed: 'right', disable: true},
    },
    onChange(value) {},
  }}
  rowKey="id"
  search={{
    labelWidth: 'auto',
  }}
  options={{
    setting: {
      listsHeight: 400,
    },
  }}
  pagination={{
    pageSize: 10,
      onChange: (page) => setCurrentPage(page),
    total: total,
  }}
  dateFormatter="string"
  headerTitle="货品管理"
  toolBarRender={() => [
    <Button
      key="button"
    icon={<PlusOutlined/>}
  onClick={() => {
    setIsCreate(true);
  }}
  type="primary"
    >
    新建货品
    </Button>,

]}
  />
  <ModalForm title="添加货品" open={isCreate}
  onFinish={async (values: any) => {
    const res = await addGoods(values);
    if (res.code != 0) {
      message.error("货品添加失败 " + res.message);
    } else {
      message.success('货品添加成功');
      setIsCreate(false);
    }
  }}
  modalProps={{
    destroyOnClose: true,
      onCancel: () => setIsCreate(false),
  }}
  autoFocusFirstInput>
    <ProFormText
      name="goodsName"
      label="货品名称"
      placeholder="请输入货品名称"
    />
    <ProFormText
      name="tally"
      label="计数单位"
      placeholder="请输入计数单位"
    />
    <ProFormText
      name="amountGd"
      label="固定金额"
      placeholder="请输入固定金额"
    />
    </ModalForm>
    <ModalForm title="修改货品信息" open={isUpdate}
  onFinish={async (values: any) => {
    const res = await updateGoods({
      id: current?.id,
      tally: values?.tally,
      goodsName: values?.goodsName,
      amountGd: values?.amountGd,
    });
    if (res.code != 0) {
      message.error("货品信息更新失败 " + res.message);
    } else {
      message.success('货品信息更新成功');
      setIsUpdate(false);
    }
  }}
  modalProps={{
    destroyOnClose: true,
      onCancel: () => setIsUpdate(false),
  }}
  initialValues={current}
  autoFocusFirstInput>
  <ProFormText
    readonly={true}
  name="goodsCode"
  label="货品编码"
  />
  <ProFormText
    name="goodsName"
  label="货品名称"
  placeholder="请输入货品名称"
  />
  <ProFormText
    name="tally"
  label="计数单位"
  placeholder="请输入计数单位"
    />
      <ProFormText
        name="amountGd"
        label="固定金额"
        placeholder="请输入固定金额"
      />
    </ModalForm>
    </>
);
}
export default GoodsControl;
